<template>
    <div class="carousel_box" ref="carouselBox">
        <div v-for="item in data" :key="item.id" class="carousel_item" @mouseenter="change(item.id)"
            @mouseleave="change(item.id)" @click="onclick(item.text)">
            <img :src="item.flag === true ? item.img_hov : item.img" />
            <p>{{ item.text }}</p>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import './carousel.css'
import dingwei from '../../../assets/images/dingwei_nor.png'
import dingwei_hov from '../../../assets/images/dingwei_hov.png'
import fenxi from '../../../assets/images/fenxi_nor.png';
import fenxi_hov from '../../../assets/images/fenxi_hov.png'
import huaxiang from '../../../assets/images/huaxiang_nor.png'
import huaxiang_hov from '../../../assets/images/huaxiang_hov.png'
import jiankong from '../../../assets/images/jiankong_nor.png'
import jiankong_hov from '../../../assets/images/jiankong_hov.png'
import tingche from '../../../assets/images/tingche_nor.png'
import tingche_hov from '../../../assets/images/tingche_hov.png'
import toukui from '../../../assets/images/toukui_nor.png'
import toukui_hov from '../../../assets/images/toukui_hov.png'

const data = reactive([
    {
        id: 1,
        img: dingwei,
        img_hov: dingwei_hov,
        text: '车辆定位系统',
        flag: false
    },
    {
        id: 2,
        img: fenxi,
        img_hov: fenxi_hov,
        text: '可视化作战平台',
        flag: false
    },
    {
        id: 3,
        img: huaxiang,
        img_hov: huaxiang_hov,
        text: '交通安全画像系统',
        flag: false
    },
    {
        id: 4,
        img: jiankong,
        img_hov: jiankong_hov,
        text: '交通态势监控系统',
        flag: false
    },
    {
        id: 5,
        img: tingche,
        img_hov: tingche_hov,
        text: '自动停车系统',
        flag: false
    },
    {
        id: 6,
        img: toukui,
        img_hov: toukui_hov,
        text: '未戴头盔识别系统',
        flag: false
    }
])
const carouselBox = ref(null);

const change = (id) => {
    let obj = data.find((item) => item.id == id);
    obj.flag = !obj.flag;

    for (let i = 0; i < carouselBox.value.children.length; i++) {
        carouselBox.value.children[i].style["animation-play-state"] = obj.flag ? "paused" : "running";
    }
}

const onclick = (text) => {
    alert(text);
}

onMounted(() => {
    for (let a = 0; a < carouselBox.value.children.length; a++) {
        carouselBox.value.children[a].style['animation-delay'] = ` ${-5 - a * 3.3}s, -${a * 3.3}s,-${a * 3.3}s`
    }
})

</script>

<style></style>